<template>
    <div>
        <el-breadcrumb separator="/" style="margin-bottom:20px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-setting" style="margin-right:4px;"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>子酒店编辑</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="infodata" :rules="rules" ref="infodata" label-width="120px" class="demo-ruleForm" label-position="right" style="width:800px;">
            <el-form-item label="所属区域">
                <el-cascader expand-trigger="hover" :options="selectCity" v-model="selectedOptions" @change="handleCity"></el-cascader>
            </el-form-item>
    
            <el-form-item label="区域" v-if="infodata.hotel_type === 1">
                <el-checkbox v-for="item in selectCity" v-model="item.opt">{{item.label}}</el-checkbox>
    
                <el-button type="text" style="margin-left:10px;" v-if="add" @click="add = false">添加</el-button>
                <div class="nameCity" v-else style="margin-left:10px;">
                    <el-input placeholder="请输入城市名称" v-model="input" style="width:120px;"></el-input>
                    <el-button type="text" @click="addCity" style="margin-left:10px">确定</el-button>
                    <el-button type="text" @click="cancelCity" style="margin-left:10px">取消</el-button>
                </div>
            </el-form-item>
    
            <!--<el-form-item label="酒店ID" prop="name" class="bg-wid">
                                                                            <el-input v-model="infodata.app_id" :disabled="rank"></el-input>
                                                                        </el-form-item>-->
    
            <el-form-item label="酒店名称" prop="name" class="bg-wid">
                <el-input v-model="infodata.hotel_name"></el-input>
            </el-form-item>
    
            <el-form-item label="酒店地址" prop="name" class="bg-wid">
                <el-input v-model="infodata.site"></el-input>
            </el-form-item>
    
            <el-form-item label="经度" prop="name" class="bg-wid">
                <el-input v-model="infodata.longitude"></el-input>
            </el-form-item>
    
            <el-form-item label="纬度" prop="name" class="bg-wid">
                <el-input v-model="infodata.latitude"></el-input>
            </el-form-item>
    
            <el-form-item label="酒店电话" prop="name" class="bg-wid">
                <el-input v-model="infodata.phone"></el-input>
            </el-form-item>
    
            <el-form-item label="酒店介绍1" prop="name">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="infodata.con_subject" style="width:600px">
                </el-input>
            </el-form-item>
    
            <el-form-item label="酒店介绍2" prop="name">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="infodata.con_tag" style="width:600px">
                </el-input>
            </el-form-item>
    
            <el-form-item label="酒店链接" prop="name">
                <el-input v-model="infodata.chain_url.guest.url" placeholder="客房预订链接" class="link"></el-input>
                <el-input v-model="infodata.chain_url.center.url" placeholder="个人中心链接" class="link"></el-input>
                <el-input v-model="infodata.chain_url.mating.url" placeholder="配套服务链接" class="link"></el-input>
                <el-input v-model="infodata.chain_url.favorable.url" placeholder="定制旅行链接" class="link"></el-input>
            </el-form-item>
    
            <el-form-item label="酒店展示背景图" prop="name">
                <el-upload class="avatar-uploader" :action="uploadingUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="infodata.hotel_img" :src="infodata.hotel_img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
    
            <el-form-item label="幻灯片" prop="name">
                <banner ref="imgae" :src="infodata.url"></banner>
            </el-form-item>
    
            <el-form-item label="酒店简介" prop="name">
                <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="infodata.brief">
                </vue-editor>
            </el-form-item>
    
            <!--<el-form-item label="酒店简介" prop="name">
                                                                                                    <el-input type="textarea" autosize placeholder="请输入内容" :autosize="{ minRows: 10, maxRows: 18}" v-model="infodata.brief">
                                                                                                    </el-input>
                                                                                                </el-form-item>-->
    
            <el-form-item>
                <el-button type="primary" @click="userSubmit">{{+this.$route.params.id === 0 ? "确定添加" : "确定修改"}}</el-button>
            </el-form-item>
    
        </el-form>
    </div>
</template>
<script>

import banner from './banner.vue'
import { VueEditor } from 'vue2-editor'

export default {
    data() {
        return {
            rank: true,
            lock: true,
            uploadingUrl: this.ajaxUrl() + "/index/image",
            selectCity: [],
            selectedOptions: [],
            editorOption: {},
            cityAll: [],
            add: true,
            input: "",
            infodata: {
                id: 0,
                belong_id: this.$store.state.grogshop.hotelId,
                brief: "",
                city: "",
                hotel_id: "",
                hotel_img: "",
                hotel_name: "",
                hotel_type: 0,
                location: "成都",
                location_id: 0,
                phone: "",
                site: "",
                longitude: 0,
                latitude: 0,
                sole_id: 0,
                url: [],
                chain_url: {
                    guest: {
                        url: ""
                    },
                    center: {
                        url: ""
                    },
                    mating: {
                        url: ""
                    },
                    favorable: {
                        url: ""
                    }
                },
                con_subject: "",
                app_id: 0,
                con_tag: ""
            },
            rules: {
                hotel_name: [
                    { required: true, message: '请输入酒店名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        };
    },
    mounted() {
        this.rank = this.$store.state.login.user_type === 1 ? true : false;

        // url id为0则为新增
        if (+this.$route.params.id === 0) {
            this.$http.post(this.ajaxUrl() + "/index/conInquire?id=" + this.$store.state.grogshop.hotelId).then((res) => {
                if (res.data.city) {
                    if (res.data.city.length != 0) {
                        this.cityAll = res.data.city.split(",");

                        for (let i = 0; i < this.cityAll.length; i++) {
                            this.selectCity.push({
                                value: i,
                                label: this.cityAll[i],
                                opt: true
                            });
                        }
                    }
                }
            })
            return;
        }
        this.$http.post(this.ajaxUrl() + "/index/conInquire?id=" + this.$route.params.id).then((response) => {
            if (!response.data.chain_url || response.data.chain_url.length === 0) {
                response.data.chain_url = {
                    guest: {
                        url: ""
                    },
                    center: {
                        url: ""
                    },
                    mating: {
                        url: ""
                    },
                    favorable: {
                        url: ""
                    }
                }
            }

            if (typeof response.data.chain_url === "string") {
                response.data.chain_url = eval('(' + response.data.chain_url + ')');
            }

            this.$http.post(this.ajaxUrl() + "/index/conInquire?id=" + this.$store.state.grogshop.hotelId).then((res) => {
                if (res.data.city) {
                    this.cityAll = res.data.city.split(",");
                }

                let index = this.cityAll.indexOf(response.data.location)
                if (index >= 0) {
                    this.selectedOptions = [];
                    this.selectedOptions = [index];
                }

                for (let i = 0; i < this.cityAll.length; i++) {
                    this.selectCity.push({
                        value: i,
                        label: this.cityAll[i],
                        opt: true
                    });
                }
            })

            this.infodata = response.data;
        })
    },
    components: {
        VueEditor,
        banner
    },
    methods: {
        handleImageAdded: function (file, Editor, cursorLocation) {
            if (!file) {
                return;
            }
            var formData = new FormData();
            formData.append('file', file);

            this.axios({
                url: this.ajaxUrl() + '/index/image',
                method: 'POST',
                data: formData
            })
                .then((result) => {
                    Editor.insertEmbed(cursorLocation, 'image', this.ajaxUrl() + "/images" + result.data.msg);
                })
                .catch((err) => {
                    this.$message.error('图片上传失败');
                })
        },
        addCity() {
            if (this.input.length === 0) {
                this.$message.error('添加内容不能为空');
            } else {
                this.selectCity.push({
                    value: this.selectCity.length + 1,
                    label: this.input,
                    opt: true
                });
                this.add = true;
                this.input = "";
            }
        },
        cancelCity() {
            this.input = "";
            this.add = true;
        },
        handleCity(value) {
            this.infodata.location = this.cityAll[value[0]];
        },
        handleAvatarSuccess(res, file) {
            this.infodata.hotel_img = this.ajaxUrl() + "/images" + file.response.msg
            // if (this.infodata.hotel_img.length === 0) {
            //     this.infodata.hotel_img = this.ajaxUrl() + "/images" + file.response.msg
            // } else {
            //     this.$http.get(this.ajaxUrl() + "/api/tool/imgRecycle", {
            //         params: {
            //             oldImgUrl: this.infodata.hotel_img,
            //             newImgUrl: file.response.msg
            //         }
            //     }).then((res) => {
            //         if (res.data.type === 'fail') {
            //             this.$message.error('图片上传失败');
            //         } else if (res.data.type === 'succeed') {
            //             this.infodata.hotel_img = this.ajaxUrl() + "/images" + file.response.msg
            //         }
            //     })
            // }

        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (file.type != 'image/jpeg' && file.type != 'image/png') {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        userSubmit() {
            if (!this.lock) {
                return;
            }

            if (this.infodata.hotel_type === 1) {
                let select = [];
                for (let i = 0; i < this.selectCity.length; i++) {
                    if (this.selectCity[i].opt) {
                        select.push(this.selectCity[i].label);
                    }
                }
                this.infodata.city = select.join(",");
            }

            //酒店添加
            if (+this.$route.params.id === 0) {
                this.infodata.hotel_id = +new Date();
                this.$http.get(this.ajaxUrl() + '/index/conShop', {
                    params: {
                        infodata: this.infodata
                    }
                }).then((res) => {
                    if (res.data.type === 'succeed') {
                        this.$message({
                            message: '酒店添加成功！',
                            type: 'success',
                            duration: 1000
                        });
                        this.$router.push('/');
                    } else {
                        this.$message.error('酒店添加失败！');
                        this.$router.push('/');
                    }
                })
            } else {//酒店修改
                console.log(this.$refs.imgae.fileList);
                this.infodata.url = this.$refs.imgae.fileList;
                this.$http.get(this.ajaxUrl() + '/index/conAmend', {
                    params: {
                        infodata: this.infodata
                    }
                }).then((res) => {
                    let _this = this;
                    if (res.data.sort === 1) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success',
                            duration: 1000
                        });
                        this.$router.push('/');
                    } else {
                        this.$message.error('修改失败！');
                        this.$router.push('/');
                    }
                })
            }

            this.lock = false;
        }
    }
}
</script>

<style>
.link {
    width: 300px;
    margin-bottom: 10px;
}

.bg-wid {
    width: 400px;
}

.el-cascader {
    width: 280px;
}

.el-upload>img {
    max-width: 200px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.ql-container {
    height: 300px!important;
}

.nameCity {
    display: inline-block;
}
</style>